import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {AtIcon, AtTabs, AtTextarea} from 'taro-ui'
import {Block, View, Text, Image} from '@tarojs/components'
import {vcmonitor} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {CUSTOM_USER, RESOURCE_URL, STAR_UPDATE} from "../../constants/api";
import {http} from "../../utils/http";
import {newHttp} from "../../utils/request";
import Water from "../components/water-mark";
import './customerInfo.scss'

interface stateType {
  tabs: any
  topData: any
  curTabIndex: number
  remark: any
  showRemark: boolean
  showTipDialog: boolean
  user_id: number
}

class Search extends Component {
  state: stateType = {
    tabs: [
      {id: 0, title: '客户关系'}
    ],
    topData: false,
    curTabIndex: 0,
    showRemark: false,
    showTipDialog: false,
    remark: '',
    user_id:0
  }
  async componentDidShow() {
    vcmonitor(this)
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    this.user_id = Taro.getCurrentInstance().router.params.userId
    await this.getTopData()
  }
  user_id
  async getTopData() {
    const topData = await newHttp.catchGet(CUSTOM_USER, {user_id:this.user_id})
    this.setState({ topData })
    return
  }


  tabClick(index) {
    this.setState({curTabIndex: index}, async () => {
      // if (index === 1) {
      //   const myChart = echarts.init(document.getElementById('main'));
      //   const option = {
      //     radar: {
      //       indicator: [
      //         {name: '购物车商品', max: 6500},
      //         {name: '搜索', max: 16000},
      //         {name: '客服咨询', max: 30000},
      //         {name: '公众号互动', max: 38000},
      //         {name: '浏览店铺', max: 52000},
      //         {name: '购买', max: 25000}
      //       ]
      //     },
      //     series: [
      //       {
      //         name: 'Budget vs spending',
      //         type: 'radar',
      //         data: [
      //           {
      //             value: [4200, 3000, 20000, 35000, 50000, 18000],
      //             name: 'Allocated Budget'
      //           }
      //         ]
      //       }
      //     ]
      //   }
      //   option && myChart.setOption(option);
      // }
    })
  }

  handleChange(remark) {
    this.setState({
      remark
    })
  }

  async finishRemark() {
    let remark_type = 1
    await http.post(STAR_UPDATE, {remark_type,remark: this.state.remark,user_id:this.user_id})
    Taro.showToast({title: '修改成功'})
    this.setState({ showRemark: false })
    await this.getTopData()
  }

  async starCustomer() {
    const {topData} = this.state
    let star_label = topData.label.star_label
    if(star_label === 1){
      star_label = 0
    }else {
      star_label =1
    }
    await http.post(STAR_UPDATE, {star_label,user_id:this.user_id})
    await this.getTopData()
  }

  render() {
    const {tabs, curTabIndex, showRemark, remark, showTipDialog, topData} = this.state
    return (
      <View className='promotionOrderDetailRoot'>
        <GzhAuth />
        <Water />
        <View className='boarding'>
          <View className='customer'>
            <View className='customer-head'>
              <View className='customer-head-info'>
                <View className={`salesman-avatar ${topData.effective === 0 && 'salesman-avatar--disabled'}`}>
                  {topData.user && <Image className='salesman-avatar__img'
                    src={topData.user.photo || `${RESOURCE_URL}/upload/images/20211120/1637398013770_87.png`}
                  />
                  }
                  {/*<Text className='salesman-avatar__tag van-tag van-tag--round van-tag--default'
                    style='background-color: rgb(255, 114, 13); color: rgb(255, 255, 255);'
                  >分销员</Text>*/}
                </View>
                <View className='customer-head__content-container'>
                  <View className='customer-head__content'>
                    {topData.user && topData.user.nick_name ? <View className='customer-head__content-nickname copy'>
                      {topData.user.nick_name}
                    </View> : <Text className='customer-head__content-nickname copy'>&nbsp;</Text>}
                    <View
                      className='star-action-btn customer-head__content-star-action-btn van-button van-button--default van-button--mini van-button--round'
                    >
                      <View className='van-button__content'>
                        {topData.label && topData.label.star_label===1 && <Text className='van-button__text' onClick={this.starCustomer.bind(this)}>取消星标</Text>}
                        {topData.label && topData.label.star_label!==1 && <Text className='van-button__text' onClick={this.starCustomer.bind(this)}><AtIcon value='star'
                          customStyle='line-height: inherit;margin-right:2px;vertical-align: text-bottom;'
                          size='14px'
                        />星标客户</Text>}
                      </View>
                    </View>
                  </View>
                  { topData.label && !!topData.label.star_label &&  <View className='vip-bar customer-head__vip-bar'><Image
                    src={`${RESOURCE_URL}/upload/images/20211119/1637308886416_130.png`}
                    className='vip-bar__icon-star' mode='widthFix'
                  /></View>}
                </View>
                {/*<View className='customer-head-info-score customer-head-info-score-grey'>
                  <View>0</View>
                  <View>成交意向</View>
                </View>*/}
              </View>
              <View className='customer-head-mark' onClick={() => {
                this.setState({showRemark: true, remark: topData.label.remark || ''})
              }}
              >
                <View>备注</View>
                {topData.label && <View className='customer-head-mark-content'>{!!topData.label.remark?topData.label.remark:''}</View>}
                <AtIcon value='iconbianji' prefixClass='car' customStyle='font-size: 14px;' /></View>
            </View>
            <View className='customer-amount'>
              <View className='customer-amount-row'>
                <View className='customer-amount-item'>
                  <View className='customer-amount-value'>{topData.countOrderNum}</View>
                  <View className='customer-amount-title'>订单数量</View>
                </View>
                <View>
                  <View className='customer-amount-value'>
                    {topData.sumTotalFee}
                  </View>
                  <View className='customer-amount-title'>成交金额（元）</View>
                </View>
              </View>
              <View className='customer-amount-row'>
                <View className='customer-amount-item'>
                  <View className='customer-amount-value'>
                    {topData.unitPrice}
                  </View>
                  <View className='customer-amount-title'>客单价（元）</View>
                </View>
                <View className='customer-amount-item'>
                  <View className='customer-amount-value'>{topData.offpay_date}</View>
                  <View className='customer-amount-title'>最后成交时间</View>
                </View>
              </View>
            </View>
            <View className='customer-tab'>
              <View className='van-tabs van-tabs--line'>
                <AtTabs className='order-tabs' tabList={tabs} current={curTabIndex} onClick={this.tabClick.bind(this)} />
                <View className='van-tabs__content'>
                  {/*{curTabIndex === 0 && <View className='van-tab__pane'>*/}
                  {/*  <View>*/}
                  {/*    <View>*/}
                  {/*      <View className='van-list'>*/}
                  {/*        <View className='van-steps van-steps--vertical'>*/}
                  {/*          <View className='van-steps__items'>*/}
                  {/*            <View className='leads van-hairline van-step van-step--vertical'>*/}
                  {/*              <View className='van-step__title'>*/}
                  {/*                <View className='clue-content'><Text> 第3次 </Text><Text>*/}
                  {/*                  想买<Text className='clue-content--orange'> 餐饮美食卡券 </Text>类商品，*/}
                  {/*                </Text>*/}
                  {/*                  发券或主动推荐商品可以提高成交率*/}
                  {/*                </View>*/}
                  {/*                <View className='leads-time'>*/}
                  {/*                  1天前*/}
                  {/*                </View>*/}
                  {/*              </View>*/}
                  {/*              <View className='van-step__circle-container'><AtIcon*/}
                  {/*                value='icon icon-a-2tubiaozhizuomoban-01' color='#969799' size='5px'*/}
                  {/*              /></View>*/}
                  {/*              <View className='van-step__line' />*/}
                  {/*            </View>*/}
                  {/*            <View className='leads van-hairline van-step van-step--vertical'>*/}
                  {/*              <View className='van-step__title'>*/}
                  {/*                <View className='clue-content'><Text> 第14次 </Text><Text>*/}
                  {/*                  想买<Text className='clue-content--orange'> 本地化生活服务 </Text>类商品，*/}
                  {/*                </Text>*/}
                  {/*                  发券或主动推荐商品可以提高成交率*/}
                  {/*                </View>*/}
                  {/*                <View className='leads-time'>*/}
                  {/*                  1天前*/}
                  {/*                </View>*/}
                  {/*              </View>*/}
                  {/*              <View className='van-step__circle-container'><AtIcon*/}
                  {/*                value='icon icon-a-2tubiaozhizuomoban-01' color='#969799' size='5px'*/}
                  {/*              /></View>*/}
                  {/*              <View className='van-step__line' />*/}
                  {/*            </View>*/}
                  {/*            <View className='leads van-hairline van-step van-step--vertical'>*/}
                  {/*              <View className='van-step__title'>*/}
                  {/*                <View className='clue-content'><Text>*/}
                  {/*                  想买<Text className='clue-content--orange'> 会员会费/虚拟币/消费卡 </Text>类商品，*/}
                  {/*                </Text>*/}
                  {/*                  发券或主动推荐商品可以提高成交率*/}
                  {/*                </View>*/}
                  {/*                <View className='leads-time'>*/}
                  {/*                  1天前*/}
                  {/*                </View>*/}
                  {/*              </View>*/}
                  {/*              <View className='van-step__circle-container'><AtIcon*/}
                  {/*                value='icon icon-a-2tubiaozhizuomoban-01' color='#969799' size='5px'*/}
                  {/*              /></View>*/}
                  {/*              <View className='van-step__line' />*/}
                  {/*            </View>*/}
                  {/*            <View className='leads van-hairline van-step van-step--vertical'>*/}
                  {/*              <View className='van-step__title'>*/}
                  {/*                <View className='clue-content'><Text> 第3次 </Text><Text>*/}
                  {/*                  想买<Text className='clue-content--orange'> 古董/邮币/字画/收藏 </Text>类商品，*/}
                  {/*                </Text>*/}
                  {/*                  发券或主动推荐商品可以提高成交率*/}
                  {/*                </View>*/}
                  {/*                <View className='leads-time'>*/}
                  {/*                  1天前*/}
                  {/*                </View>*/}
                  {/*              </View>*/}
                  {/*              <View className='van-step__circle-container'><AtIcon*/}
                  {/*                value='icon icon-a-2tubiaozhizuomoban-01' color='#969799' size='5px'*/}
                  {/*              /></View>*/}
                  {/*              <View className='van-step__line' />*/}
                  {/*            </View>*/}
                  {/*            <View className='leads van-hairline van-step van-step--vertical'>*/}
                  {/*              <View className='van-step__title'>*/}
                  {/*                <View className='clue-content'><Text>*/}
                  {/*                  想买<Text className='clue-content--orange'> 书籍/杂志/报纸 </Text>类商品，*/}
                  {/*                </Text>*/}
                  {/*                  发券或主动推荐商品可以提高成交率*/}
                  {/*                </View>*/}
                  {/*                <View className='leads-time'>*/}
                  {/*                  1天前*/}
                  {/*                </View>*/}
                  {/*              </View>*/}
                  {/*              <View className='van-step__circle-container'>*/}
                  {/*                <AtIcon value='icon icon-a-2tubiaozhizuomoban-01' color='#969799' size='5px' />*/}
                  {/*              </View>*/}
                  {/*              <View className='van-step__line' />*/}
                  {/*            </View>*/}
                  {/*            <View className='leads van-hairline van-step van-step--vertical'>*/}
                  {/*              <View className='van-step__title'>*/}
                  {/*                <View className='clue-content'><Text>*/}
                  {/*                  想买<Text className='clue-content--orange'> 水产肉类/新鲜蔬果/熟食/现做食品 </Text>类商品，*/}
                  {/*                </Text>*/}
                  {/*                  发券或主动推荐商品可以提高成交率*/}
                  {/*                </View>*/}
                  {/*                <View className='leads-time'>*/}
                  {/*                  1天前*/}
                  {/*                </View>*/}
                  {/*              </View>*/}
                  {/*              <View className='van-step__circle-container'>*/}
                  {/*                <AtIcon value='icon icon-a-2tubiaozhizuomoban-01' color='#969799' size='5px' />*/}
                  {/*              </View>*/}
                  {/*              <View className='van-step__line' />*/}
                  {/*            </View>*/}
                  {/*            <View className='leads van-hairline van-step van-step--vertical'>*/}
                  {/*              <View className='van-step__title'>*/}
                  {/*                <View className='clue-content'>*/}
                  {/*                  成为你的新客户，快去聊聊吧*/}
                  {/*                </View>*/}
                  {/*                <View className='leads-time'>*/}
                  {/*                  1天前*/}
                  {/*                </View>*/}
                  {/*              </View>*/}
                  {/*              <View className='van-step__circle-container'>*/}
                  {/*                <AtIcon value='icon icon-a-2tubiaozhizuomoban-01' color='#969799' size='5px' />*/}
                  {/*              </View>*/}
                  {/*              <View className='van-step__line' />*/}
                  {/*            </View>*/}
                  {/*          </View>*/}
                  {/*        </View>*/}
                  {/*        <View className='van-list__finished-text'>线索只保留最近7天</View>*/}
                  {/*        <View className='van-list__placeholder' />*/}
                  {/*      </View>*/}
                  {/*    </View>*/}
                  {/*  </View>*/}
                  {/*</View>}*/}
                  {/*{curTabIndex === 1 && <View className='van-tab__pane'>*/}
                  {/*  <View className='wants'>*/}
                  {/*    <View>*/}
                  {/*      <View className='wants-head'>*/}
                  {/*        <View className='wants-head-score wants-head-score-down'>*/}
                  {/*          <Text className='span'>本店成交意向：</Text>*/}
                  {/*          0*/}
                  {/*        </View>*/}
                  {/*        <AtIcon value='icon icon-guizeshuoming-01-01' onClick={() => {*/}
                  {/*          this.setState({showTipDialog: true})*/}
                  {/*        }}*/}
                  {/*          className='wants-icon van-icon van-icon-warning-o' color='rgb(150, 151, 153)'*/}
                  {/*          customStyle='font-size: 16px;'*/}
                  {/*        />*/}
                  {/*      </View>*/}
                  {/*      <View id='main' style='height: 240px;' />*/}
                  {/*      <View className='wants-bottom'>*/}
                  {/*        <View className='wants-bottom-title'><Text className='span'>购物车商品</Text>*/}
                  {/*          <View className='wants-head-score wants-head-score-down'*/}
                  {/*            style='font-size: 24px;'*/}
                  {/*          >*/}
                  {/*            0*/}
                  {/*          </View>*/}
                  {/*        </View>*/}
                  {/*        <View className='wants-bottom-tip'>*/}
                  {/*          购物车的商品数量越多分值越高，客户可能想买的商品没有支付，可以点击发优惠券帮助转化下单 。*/}
                  {/*        </View>*/}
                  {/*      </View>*/}
                  {/*    </View>*/}
                  {/*  </View>*/}
                  {/*</View>}*/}
                  {curTabIndex === 0 && <View className='van-tab__pane'>
                    <View>
                      <View>
                        <View className='van-cell van-cell--borderless'>
                          <View className='van-cell__title'><Text>客户关系更新时间</Text>
                          </View>
                          <View className='van-cell__value'><Text>{topData.endBindDate}</Text>
                          </View>
                        </View>
                        <View className='van-cell van-cell--borderless'>
                          <View className='van-cell__title'><Text>保护期剩余</Text>
                          </View>
                          <View className='van-cell__value'><Text>{topData.bindEffectiveDayNum}</Text></View>
                        </View>
                       {/* <View className='van-cell van-cell--borderless'>
                          <View className='van-cell__title'><Text>有效期剩余</Text>
                          </View>
                          <View className='van-cell__value'><Text>14天</Text></View>
                        </View>*/}
                        <View className='van-cell'>
                          <View className='van-cell__title'><Text>绑定时间</Text></View>
                          <View className='van-cell__value'>
                            <Text>{topData.startBindDate}</Text>
                          </View>
                        </View>
                        {topData.invalidTime && <View className='van-cell'>
                          <View className='van-cell__title'><Text>失效时间</Text></View>
                          <View className='van-cell__value'>
                            <Text>{topData.invalidTime}</Text>
                          </View>
                        </View>}
                        { topData.invalidReason && <View className='van-cell'>
                          <View className='van-cell__title'><Text>失效原因</Text></View>
                          <View className='van-cell__value'>
                            <Text>{topData.invalidReason}</Text>
                          </View>
                        </View>}
                      </View>
                    </View>
                  </View>}
                </View>
              </View>
            </View>
            {showRemark && <Block>
              <View className='van-overlay' style='z-index: 99;' onClick={() => {
                this.setState({showRemark: false})
              }}
              />
              <View className='remark'>
                <View className='remark-head'>
                  <View className='remark-head-cancel' onClick={() => {
                    this.setState({showRemark: false, remark: ''})
                  }}
                  >取消</View>
                  <View className='remark-head-title'>客户备注</View>
                  <View className='remark-head-comfirm' onClick={this.finishRemark.bind(this)}>完成</View>
                </View>
                <View className='remark-input van-cell van-field'>
                  <View className='van-cell__value van-cell__value--alone van-field__value'>
                    <View className='van-field__body'>
                      <AtTextarea
                        value={remark}
                        onChange={this.handleChange.bind(this)}
                        maxLength={13}
                        className='van-field__control'
                        placeholder='请输入客户备注'
                      />
                    </View>
                  </View>
                </View>
              </View>
            </Block>}
          </View>
        </View>
        {showTipDialog && <Block>
          <View className='van-overlay' style='z-index: 99;' onClick={() => {
            this.setState({showTipDialog: false})
          }}
          />
          <View className='van-dialog' style='z-index: 2017;'>
            <View className='van-dialog__header'>本店成交意向</View>
            <View className='van-dialog__content'>
              <View className='van-dialog__message van-dialog__message--has-title'>成交意向是根据客户和店铺的互动的多项行为数据计算得出的。该分数实时显示，上升或下降趋势是当前分数与昨天24点的分数对比得出的。
              </View>
            </View>
            <View className='van-hairline--top van-dialog__footer' onClick={() => {
              this.setState({showTipDialog: false})
            }}
            >
              <View className='van-button van-button--default van-button--large van-dialog__confirm'>
                <View className='van-button__content'><Text className='van-button__text'>我知道了</Text></View>
              </View>
            </View>
          </View>
        </Block>
        }
        <View style='height: 30px;' />
      </View>
    )
  }
}

export default Search as ComponentClass
